<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bin</title>
		<link rel="stylesheet" type="text/css" href="css/program.css" />
		
		<style type="text/css">
		      body{
			     position: relative;
		     }
		     
		  #rocket #rocket1{
				position:fixed;
				right: 0;
				bottom: 20px;
				}
		  #rocket{
		  	position: absolute;
		        } 
			</style>
		</head>

	<body>
		<!--头部区域-->
		<header>
			<!--插入logo-->
			<div id="logo">
				<img src="img/img1/shininglogo.png" />
			</div>
			<!--导航栏-->
			<div id="navigation">
				<a href="home.html">Home</a>
				<a href="about.html">About</a>
				<a href="rendering.html">Rendering</a>
				<a href="3DAnimation.html">3D Animation</a>
				<a href="Bin.html">Bin</a>
				<a href="contact.html">Contact</a>
			</div>
			<div id="navigationMerge">
				<img src="img/img1/nav.png" />
			</div>
		</header>
		<ul id="navigationHidden">
			<li>
				<a href="home.html">Home</a>
			</li>
			<li>
				<a href="about.html">About</a>
			</li>
			<li>
				<a href="rendering.html">Rendering</a>
			</li>
			<li>
				<a href="3DAnimation.html">3D Animation</a>
			</li>
			<li>
				<a href="Bin.html">Bin</a>
			</li>
			<li>
				<a href="contact.html">Contact</a>
			</li>
		</ul>
		<!--内容区域-->
		<div id="binWrap">
			<div class="binContent">
				<div class="binContentText">
					<h2>1 MODEL COMPLETION</h2>
					Establishing and creating the vi sible and multi-dimension Architecture,
					 Structural and MEP
				</div>
				<div class="binContentLeft">
					<img src="img/img5/BIM-p1-1.png"/>
					<img src="img/img5/BIM-p1-2.png"/>
					<img src="img/img5/BIM-p1-3.png"/>
				</div>
				<div class="binContentRight">
					<img src="img/img5/building1-half-t.png"/>
				</div>
			</div>
			<div class="binContent">
				<div class="binContentText">
					<h2>1 MODEL COMPLETION</h2>
					Establishing and creating the vi sible and multi-dimension Architecture,
					 Structural and MEP
				</div>
				<div class="binContentLeft">
					<img src="img/img5/BIM-p2-1.jpg"/>
					<img src="img/img5/BIM-p2-2.jpg"/>
				</div>
				<div class="binContentRight">
					<img src="img/img5/building1-half-b.png"/>
				</div>
			</div>
			<div class="binContent">
				<div class="binContentText">
					<h2>1 MODEL COMPLETION</h2>
					Establishing and creating the vi sible and multi-dimension Architecture,
					 Structural and MEP
				</div>
				<div class="binContentLeft">
					<img src="img/img5/BIM-p3-1.jpg"/>
					<img src="img/img5/BIM-p3-2.jpg"/>
				</div>
				<div class="binContentRight">
					<img src="img/img5/building2-half-t.png"/>
				</div>
			</div>
			<div class="binContent">
				<div class="binContentText">
					<h2>1 MODEL COMPLETION</h2>
					Establishing and creating the vi sible and multi-dimension Architecture,
					 Structural and MEP
				</div>
				<div class="binContentLeft">
					<img src="img/img5/BIM-p4-1.jpg"/>
					<img src="img/img5/BIM-p4-2.jpg"/>
				</div>
				<div class="binContentRight">
					<img src="img/img5/building2-half-b.png"/>
				</div>
			</div>
			<div class="binContent">
				<div class="binContentText">
					<h2>1 MODEL COMPLETION</h2>
					Establishing and creating the vi sible and multi-dimension Architecture,
					 Structural and MEP
				</div>
				<div class="binContentLeft">
					<img src="img/img5/BIM-p1-1.png"/>
					<img src="img/img5/BIM-p1-2.png"/>
					<img src="img/img5/BIM-p1-3.png"/>
				</div>
				<div class="binContentRight">
					<img src="img/img5/building3-half-t.png"/>
				</div>
			</div>
			<div class="binContent">
				<div class="binContentText">
					<h2>1 MODEL COMPLETION</h2>
					Establishing and creating the vi sible and multi-dimension Architecture,
					 Structural and MEP
				</div>
				<div class="binContentLeft">
					<img src="img/img5/BIM-p1-1.png"/>
					<img src="img/img5/BIM-p1-2.png"/>
					<img src="img/img5/BIM-p1-3.png"/>
				</div>
				<div class="binContentRight">
					<img src="img/img5/building3-half-b.png"/>
				</div>
			</div>
			<div id="rocket">
		<img src="img/img5/r.png" alt="fly" id="rocket1"/>	
		</div>
	</div>
		<footer>
			<div id="footerTop">
				<img src="img/img1/footer0.jpg" />
			</div>
			<div id="footerCenter">
				<img src="img/img1/footer1.jpg" />
				<img src="img/img1/footer2.jpg" />
				<img src="img/img1/footer3.jpg" />
				<img src="img/img1/footer4.jpg" />
			</div>
			<div id="footerBottom">
				Copyright © 1998-2015 shining Group
			</div>
		</footer>
		
		
		<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jsPicture.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/tween.js"></script>
		<script type="text/javascript">
			$("#binWrap>div:even").css({
				background:"silver"
			});
			$("#binWrap>div:odd").css({
				background:"gray"
			})
			$("#binWrap .binContentRight:eq(1)").css({
				top:0,
				right:46
			})
			$("#binWrap .binContentRight:eq(2)").css({
				bottom:0,
				right:45
			})
			$("#binWrap .binContentRight:eq(3)").css({
				top:0,
				right:0
			})
			$("#binWrap .binContentRight:eq(5)").css({
				top:0,
				right:50
			})
			$("footer").css({
				top: $("header").height() + $("#binWrap").height()
			});
$('document').ready(function(){
	$('#rocket1').click(function(){
		$('html body').animate({
			scrollTop:0
		},"slow");
//		$('#flysh').animate({
//			top:"-=1000",
//		},100);
//		$("#flysh").animate({
//			top:"+=20",
//		},100) 火箭发射不了上不去不能上升
		      $("#rocket").animate({
					left:"-=20",
				},100);
				$("#rocket").animate({
					left:"+=40",
				},100);
				$("#rocket").animate({
					left:"-=20",
				},100);
				$("#rocket").animate({
					top:"+=50",
				},100);
					$("#rocket").animate({
					top:"-=1000",
				},1000);
				$("#rocket").animate({
					top:"+=950",
				},100);
//		        $("#rocket").animate({
//		          	right:"0",
//		        	    bottom:"20"
//		        })
		
		
	
		
});
	})
             var scrollTop = 0;
			window.onmousewheel  = function  (e) {
				var even = e || event ;
				if (even.wheelDelta < 0 ) {
					scrollTop++;
					if (scrollTop > 5) {
						scrollTop = 5 ;
					}
					$(window).scrollTop($("#binWrap .binContent").height() * scrollTop)
				} else if (even.wheelDelta > 0 ){
					scrollTop--;
					if (scrollTop < 0) {
						scrollTop = 0 ;
					}
					$(window).scrollTop($("#binWrap .binContent").height() * scrollTop)
				}
				}
		</script>
	</body>

</html>